<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar title="提币记录" left-arrow @click-left="goBack"></van-nav-bar>

    <!-- <div class="pay-list"> -->
 
    <!-- 记录内容 -->
    <div class="contain">
        <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> -->
        <div class="contain-list" v-for="(item,index) in dealList" :key="index">
          <div>
            <span>
              <img style="width:10px;height:10px" src="../../assets/images/icon-dot.png" alt>
            </span>
          </div>
          <div>
            <p>
              <span>{{item.createTime}}</span>
              <span>+{{item.turnoverAmount}} {{item.recordName}}</span>
            </p>
            <p>
              <span>{{item.id}}</span>
              <span></span>
            </p>
          </div>
        </div>
          <!-- </van-pull-refresh> -->
    </div>

    <!-- </div> -->

    <!-- 分页 -->
    <p v-if="flagBtm" style="font-size: 10px; color: rgb(204, 204, 204); margin: 10px 0;">没有了！！！</p>
  </div>
</template>
<script>
import Vue from "vue";
import { NavBar,List,Cell,CellGroup } from "vant";
import axios from "axios";
import { rechargeWithdrawRecord } from "../../axios/api.js";
export default {
  data() {
    return {
      count: 0,
       pages:1,
      isLoading: false,
      dealList: [],
      flagBtm:false,
      loading:false,
      finished: false,
    };
  },
  created() {
    console.log(this.$route.query.id)
    this.getRrecordList();
     this.downUp();
  },

  components: {
    [NavBar.name]: NavBar,
    [List.name]: List,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup
  },
  methods: {
    //返回
    goBack() {
      this.$router.go(-1);
    },
    // onRefresh() {
    //   setTimeout(() => {
    //     this.$toast("刷新成功");
    //     this.isLoading = false;
    //     this.getRrecordList();
    //   }, 500);
    // },

    //提币
    getRrecordList() {
       var that = this;
       that.loading = true;
      rechargeWithdrawRecord({
        params: {
          token: localStorage.getItem("setToken"),
          type: 6,
          page: that.pages,
          rows: 10,
          virtualWalletId: this.$route.query.id
        }
      }).then(res => {
        console.log(res.data.data, 8888);
        this.dealList = res.data.data;
        console.log(this.dealList, 99999);
      });
    },
           //上拉加载
    downUp(){
      var that = this;
      var startX, startY, endX, endY, X, Y;
      $("body")
        .on("touchstart", function(e) {
          var touch = e.originalEvent.targetTouches[0];
          startX = touch.pageX;
          startY = touch.pageY;
        })
        .on("touchend", function(e) {
          var touch = e.originalEvent.changedTouches[0];
          endX = touch.pageX;
          endY = touch.pageY;
          X = endX - startX;
          Y = endY - startY;
          if (Y < -30) {
            that.pages++;
            console.log(that.pages)
            rechargeWithdrawRecord({
                params: {
                  token: sessionStorage.getItem("token"),
                  type: 6,
                  page: that.pages,
                  rows: 10,
                  virtualWalletId: this.coinNowId
              }
            }).then(res => {
                if(res.data.data.length <= 0){
                    that.flagBtm = true;
                    return false;
                }else{
                    for(var i=0 ; i < res.data.data.length ; i++){
                     this.dealList = res.data.data;
                    }
                }
                console.log(that.dealList,88888)
            })
          }
        });
    },
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/less/variable.less";
.top {
  width: 100%;
  height: 66px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  > div {
    width: 50%;
    font-size: 14px;
    padding: 0 20px;
    box-sizing: border-box;
    p {
      text-align: left;
    }
  }
  > div:nth-child(1) {
    p:nth-child(1) {
      margin-bottom: 4px;
    }
  }
  > div:nth-child(2) {
    text-align: right;
    color: #d1a568;
    span {
      display: inline-block;
      width: 80px;
      height: 25px;
      border: 1px solid #d1a568;
      text-align: center;
      line-height: 25px;
    }
  }
}

// 交易列表
.pay-list {
  border-top: 10px solid #f6f6f8;
}

// 交易内容
.contain {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  .contain-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #d1a568;
    border-bottom: 1px solid #eee;
    padding: 8px 0;
    > div:nth-child(1) {
      width: 5%;
      color: #d1a568;
    }
    > div:nth-child(2) {
      width: 95%;
      color: #d1a568;
      p:nth-child(1),
      p:nth-child(2) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 4px;
        box-sizing: border-box;
        font-size: 13px;
      }
      p:nth-child(1) {
        span:nth-child(1) {
          color: #333;
          font-weight: bold;
        }
      }
      p:nth-child(2) {
        margin-top: 4px;
        font-size: 10px;
        span:nth-child(1) {
          color: #999;
        }
      }
    }
  }
}
</style>
